<template>
  <div>
    <div class="tabDiv">
      <div>
        <p
          v-for="(item,index) in tabList"
          :key="index"
          :class="item.isClick ? 'tabCheck' : 'tabUncheck'"
          @click="tabClick(item)"
        >{{item.label}}</p>
      </div>
      <img
        src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/xiaoxi.png"
        mode="widthFix"
        class="newWordImg"
        @click="handleLinkNew"
      />
    </div>
    <div class="list" v-if="isState === '0'">
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 38px)"
        scroll-y
        @scrolltolower="handleLoadMore"
      >
        <div v-for="(item,idx) in list" :key="idx" class="goods-block">
          <img :src="item.goodsImg" mode="aspectFit" class="preview" />
          <div class="goods-info" @click="orderClick(item)">
            <p class="goods-name ellipsis">{{item.goodsName}}</p>
            <!-- <p class="goods-stock">规格: {{item.specification}}</p> -->

            <div class="goods-price" v-if="item.goodsKind !== 'INTEGRAL'">
              <div class="newShowMoney">
                <p>{{item.goodsAmount}}</p>
                <span class="amount">{{item.goodsDiscount}}</span>
              </div>
              <span class="discount">赚：{{item.disAmount}}</span>
            </div>
            <p class="goods-price" v-else>
              <span class="discount">{{item.goodsCost}}</span>
              <span class="icon">积分商品</span>
            </p>
          </div>
          <div class="edit-block">
            <button
              class="edit-btn"
              size="mini"
              @click="handleEditGoods(item)"
            >删除</button>
            <!-- <p class="goods-stock">库存: {{item.goodsStock}}</p> -->
          </div>
        </div>
        <p v-if="alreadyLastPage" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>
    <div class="list2" v-else>
      <scroll-view
        class="scroll-wrap no-scroll-bar"
        style="height:calc(100% - 38px)"
        scroll-y
        @scrolltolower="handleLoadMore2"
      >
        <div
          v-for="(item,index) in disOrderList"
          :key="index"
          class="orderList"
          @click="disOrderClick(item)"
        >
          <div class="top">
            <p>
              订单类型：
              {{item.orderType === 'dis' ? '分销订单' : '普通订单'}}
              <!-- {{(item.state === '1' && item.shippingMode === '0') ? ('待发货') :
              (item.state === '1' && item.shippingMode === '1') ? ('待核销') :
              (item.state === '1' && item.shippingMode === '2') ? ('待核销') :
              (item.state === '3' && (item.shippingMode === '1' || item.shippingMode === '2')) ? ('已核销') :
              (item.state === '7' && item.shippingMode === '0') ? ('已评价') :
              ((item.state === '3' || item.state === '7') && item.shippingMode === '3') ? ('已消费') :
              (item.state === '1') ? ('待发货') :
              (item.state === '0') ? ('待付款') :
              (item.state === '4') ? ('待退款') :
              (item.state === '3') ? ('已收货') :
              (item.state === '7') ? ('已收货') :
              (item.state === '5') ? ('已退款') :
              (item.state === '8') ? ('已拒绝') : 
              (item.state === '8') ? ('已拒绝') : ('其他')
              }}-->
            </p>

            <span>{{item.orderDate}}</span>
          </div>
          <div class="middle">
            <p>
              订单金额：
              <span>￥{{item.cost}}</span>
            </p>
            <span>用户名：{{item.realName ? item.realName : '暂无'}}</span>
          </div>
          <div class="bottom">
            <p>订单号：{{item.orderNo}}</p>
            <!-- <span>{{state[item.state]}}</span> -->
            <span>
              {{(item.state === '1' && item.shippingMode === '0') ? ('待发货') :
              (item.state === '1' && item.shippingMode === '1') ? ('待核销') :
              (item.state === '1' && item.shippingMode === '2') ? ('待核销') :
              (item.state === '3' && (item.shippingMode === '1' || item.shippingMode === '2')) ? ('已核销') :
              (item.state === '7' && item.shippingMode === '0') ? ('已评价') :
              ((item.state === '3' || item.state === '7') && item.shippingMode === '3') ? ('已消费') :
              (item.state === '1') ? ('待发货') :
              (item.state === '0') ? ('待付款') :
              (item.state === '4') ? ('待退款') :
              (item.state === '3') ? ('已收货') :
              (item.state === '7') ? ('已收货') :
              (item.state === '5') ? ('已退款') :
              (item.state === '8') ? ('已拒绝') :
              (item.state === '8') ? ('已拒绝') : ('其他')
              }}
            </span>
          </div>
        </div>
        <p v-if="alreadyLastPage2" class="end-tip">没有更多了</p>
      </scroll-view>
    </div>
    <div class="alertBox" v-if="isAlert">
      <div class="cont">
        <div class="imgBox">
          <img
            src="https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/icon/scts1.png"
            mode="widthFix"
            class="showImg"
          />
        </div>
        <div class="hint">
          <p>提示</p>
          <span>是否确认删除此商品</span>
        </div>
        <button class="btn" @click="handleAffirm">确认</button>
        <div class="close" @click="closeAlert">
          <icon type="clear" size="28" color="#fff" />
        </div>
      </div>
      <div class="zz"></div>
    </div>
    <!-- <vue-tab-bar
      @fetch-index="clickIndexNav"
      :selectNavIndex="selectNavIndex"
      :needButton="needButton"
    ></vue-tab-bar> -->
  </div>
</template>

<script>
import {} from '@/utils'
import {
  FIND_GOODS_DIS_PAGE_API,
  DELETE_GOODS_DIS_API,
  FIND_SHOP_ORDER_PAGE
} from '@/api'
import vueTabBar from '../../../../components/vueTabBarDis'

export default {
  components: { vueTabBar },
  props: {},
  data () {
    return {
      isAlert: false,
      goodsList: [],
      disOrderList: [],
      currentPage: 1,
      currentPage2: 1,
      alreadyLastPage: false,
      alreadyLastPage2: false,
      isState: '0',
      selectNavIndex: 1,
      needButton: true,
      tabList: [
        {
          label: '分销商品',
          key: '0',
          isClick: true
        },
        {
          label: '分销订单',
          key: '1',
          isClick: false
        }
      ],
      state: {
        '0': '待付款',
        '1': '待收货',
        '2': '已取消'
      }
    }
  },
  computed: {
    list () {
      return this.goodsList.map(_ => ({
        goodsAmount: '￥' + (_.goodsAmount * 1).toFixed(2),
        disAmount: '￥' + (_.disAmount * 1).toFixed(2),
        goodsDiscount: '￥' + (_.goodsDiscount * 1).toFixed(2),
        goodsName: _.goodsName,
        goodsNo: _.goodsNo,
        goodsStock: _.goodsStock,
        goodsImg: _.goodsImg,
        goodsKind: _.goodsKind,
        goodsCost: '￥' + (_.goodsCost * 1).toFixed(2)
      }))
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onReady () {},
  onLoad () {},
  onShow () {
    this.$cookie.remove('describe-img1')
    this.$cookie.remove('describe-img2')
    this.goodsList = []
    this.currentPage = 1
    this.disOrderList = []
    this.currentPage2 = 1
    this.getGoodsList()
    this._getShopOrderList()
    wx.hideTabBar()
  },
  methods: {
    disOrderClick (item) {
      this.$router.push(
        `/pages/shop-management/shop-order-info/main?orderNo=${
          item.orderNo
        }&isDis=1`
      )
    },
    orderClick (item) {
      this.$router.push(
        `/pages/shop-management/dis/dis-shop-info/main?goodsNo=${item.goodsNo}`
      )
    },
    dateTime (value) {
      if (value) {
        return value.split(' ')[0]
      } else {
        return ''
      }
    },
    tabClick (item) {
      const vm = this
      vm.tabList.forEach(_ => {
        _.isClick = false
      })
      item.isClick = true
      vm.isState = item.key
      vm.currentPage = 1
      if (vm.isState === '0') {
        vm.getGoodsList()
      } else {
        vm._getShopOrderList()
      }
    },
    handleLinkNew () {
      this.$router.push('/pages/mine/inform/index/main')
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this.getGoodsList()
      }
    },
    handleLoadMore2 () {
      if (!this.alreadyLastPage2) {
        this._getShopOrderList()
      }
    },
    handleEditGoods (item) {
      const vm = this
      // vm
      //   .$dialog('是否删除该商品', '')
      //   .then(() => {
      //     vm.deleteDisShop(item.goodsNo)
      //   })
      //   .catch(() => {})
      vm.isAlert = true
      vm.goodForm = item
    },

    closeAlert () {
      const vm = this
      vm.isAlert = false
      vm.goodForm = {}
    },
    handleAffirm (item) {
      this.deleteDisShop(item.goodsNo)
    },

    getGoodsList () {
      const vm = this

      FIND_GOODS_DIS_PAGE_API(
        vm.$cookie.get('account').shopId,
        vm.currentPage,
        10
      )
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList (list, isFirst, isLast) {
      if (isFirst) {
        this.goodsList = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage = true
        } else {
          // has next page
          this.alreadyLastPage = false
          this.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.goodsList.push(...list)
        this.alreadyLastPage = true
      } else {
        // middle page
        this.goodsList.push(...list)
        this.alreadyLastPage = false
        this.currentPage += 1
      }
    },
    deleteDisShop () {
      const vm = this
      DELETE_GOODS_DIS_API(
        vm.$cookie.get('account').shopId,
        vm.goodForm.goodsNo
      )
        .then(r => {
          if (r.data.code === '0') {
            // vm.$alert('删除分销商品成功', '').then(() => {
            vm.goodsList = []
            vm.currentPage = 1
            vm.closeAlert()
            vm.getGoodsList()
            // })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _getShopOrderList () {
      const vm = this
      let params = {
        disShopId: vm.$cookie.get('account').shopId
      }
      FIND_SHOP_ORDER_PAGE(params, vm.currentPage2, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { list, isFirstPage, isLastPage } = r.data.data
            list.forEach(_ => {
              _.orderDate = vm.dateTime(_.orderDate)
            })
            vm.printList2(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    printList2 (list, isFirst, isLast) {
      if (isFirst) {
        this.disOrderList = list
        if (isLast || !list.length) {
          // only one page
          this.alreadyLastPage2 = true
        } else {
          // has next page
          this.alreadyLastPage2 = false
          this.currentPage += 1
        }
      } else if (isLast) {
        // more than one page and this is the last page
        this.disOrderList.push(...list)
        this.alreadyLastPage2 = true
      } else {
        // middle page
        this.disOrderList.push(...list)
        this.alreadyLastPage2 = false
        this.currentPage += 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.tabDiv {
  display: flex;
  align-items: center;
  div {
    display: flex;
    width: 230px;
    height: 30px;
    margin: auto;
    border-radius: 25px;
    border: 1px solid #ea4835;
    p {
      width: 50%;
      font-size: 15px;
      line-height: 30px;
      text-align: center;
      border-radius: 25px;
    }
    .tabCheck {
      color: #fff;
      background: linear-gradient(to right, #ea4835, #ff7d69);
    }
    .tabUncheck {
      color: #ea4835;
      background: #fff;
    }
  }
  .newWordImg {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 2;
    right: 20px;
  }
}
.list {
  height: calc(100% - 48px);
  background: #f6f6f6;
  > .scroll-wrap {
    .goods-block {
      width: calc(100% - 20px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      margin: 0 10px 10px;
      // box-shadow: 0 0 8px lighten($blue, 20%);
      height: 80px;
      position: relative;
      overflow: hidden;
      transform: translateY(10px);
      border-radius: 6px;
      background: #fff;
      > .preview {
        width: 70px;
        height: 70px;
      }
      > .goods-info {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 14px;
        width: calc(100% - 150px);
        > .goods-price {
          > .newShowMoney {
            font-size: 13px;
            display: flex;
            > .amount {
              color: $gray;
              text-decoration: line-through;
              margin-left: 10px;
            }
          }
          > .discount {
            display: inline-block;
            color: $red;
            min-width: 50px;
            padding-right: 10px;
          }

          > .icon {
            border-radius: 4px;
            border: 1px solid #5d93fd;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            padding: 2px 3px;
          }
        }
      }
      > .edit-block {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 55px;
        > .goods-stock {
          font-size: 14px;
          color: #cccccc;
        }
        > .tag {
          font-size: 10px;
          color: $white;
          background-color: $blue;
          position: absolute;
          top: -5px;
          right: -35px;
          padding: 15px 30px 2px;
          transform: rotate(45deg);
          &.danger {
            background-color: $red;
          }
        }
        > .tagImg {
          width: 38px;
          height: 38px;
          background: #fff;
          position: absolute;
          top: 0;
          right: 0;
        }
        > .edit-btn {
          // width: 40px;
          // height: 20px;
          border-radius: 25px;
          display: block;
          // color: $white;
          color: #ef250b;
          font-size: 10px;
          // background-color: $blue;
          border: 1px solid #ef250b;
          line-height: 20px;
          transform: translateY(5px);
          padding: 1px 10px;
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
.list2 {
  height: calc(100% - 60px);
  > .scroll-wrap {
    .orderList {
      width: 90%;
      margin: 10px auto;
      height: 100px;
      border: 1px solid #dfe1e6;
      box-shadow: 0 0 8px lighten(#dfe1e6, 20%);
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #000;
        margin: 10px 10px;
      }
      .top {
        span {
          color: #606266;
        }
      }
      .middle {
        p {
          span {
            color: #ea4835;
          }
        }
      }
      .bottom {
        p {
          color: #606266;
        }
        span {
          color: #f7a935;
        }
      }
    }
    .end-tip {
      margin: 0;
      padding: 15px;
      text-align: center;
      color: $gray;
      font-size: 15px;
    }
  }
}
.alertBox {
  .cont {
    width: 320px;
    height: 360px;
    border: 2px solid #eee;
    border-radius: 6px;
    background: #fff;
    position: fixed;
    z-index: 21;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    .imgBox {
      width: 100%;
      height: 210px;
      display: flex;
      align-items: center;
      justify-content: center;
      .showImg {
        width: 180px;
        height: 180px;
      }
    }
    .hint {
      p {
        font-size: 18px;
        color: #000;
        text-align: center;
        line-height: 25px;
      }
      span {
        font-size: 14px;
        color: #b6b6b6;
        text-align: center;
        line-height: 25px;
      }
    }
    .btn {
      width: 80%;
      height: 40px;
      line-height: 40px;
      border-radius: 25px;
      margin: auto;
      color: #fff;
      background: linear-gradient(to right, $new-dark-blue, $new-light-blue);
    }
    .close {
      position: absolute;
      z-index: 22;
      left: 50%;
      bottom: -20%;
      transform: translate(-50%, 0%);
    }
  }
  .zz {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #000000;
    opacity: 0.3;
  }
}
</style>
